Snackbar 提示欄

提示欄不應打斷使用者體驗

通常出現在使用者介面底部

可以自行消失，也可以留在螢幕上，直到使用者採取行動

Configurations 配置

1 Single line 單行 2 Single line with action 帶動作的單行 3 Two lines 兩行 4 Two lines with action 帶動作的兩行 5 Two lines with longer action兩行具有更長動作的程式碼

Usage 用法

會通知使用者應用已經執行或即將執行的過程。它們暫時出現在螢幕底部。它們不應該打斷使用者體驗。人們可以在不與 snackbar 互動的情況下瀏覽頁面內容。一次只能顯示一個訊息欄。可包含單個操作。“關閉”或“取消”操作是可選的。

Similar components 類似元件

對話方塊和提示欄都能顯示資訊，要根據資訊有多重要來選擇用哪個。這樣合理使用不同的提示方式，可以避免過多使用提示欄。

對話方塊需要使用者立即採取行動

When to use snackbars 何時使用 snackbars？

Snackbars 用於傳達最小干擾且不需要使用者操作的訊息。

Component 元件	Priority 優先順序	User action 使用者操作
Snackbar 提示欄	Low priority 低優先順序	會自動消失
Dialog 對話方塊	High priority 高優先順序	必需：對話方塊會阻止應用程式的使用，直到使用者執行對話方塊操作或退出對話方塊（如果有此選項）

Accessibility requirements for web 網頁無障礙要求

在網路上，自動消失的提示欄，通常指頁面上短暫顯示提示資訊的區域，對於視力不佳或需要更多時間來感知資訊的人來說是難以使用的。這可以透過兩種方式解決：

1. Add inline feedback 新增內聯反饋

自動消失的提示欄資訊需要在內聯位置或靠近觸發位置以其他可訪問方式顯示。如"儲存"按鈕更新為"已儲存"，同時觸發訊息提示框。。

2. Make the snackbar actionable 讓提示欄具備可操作性

或者，新增操作，這樣在執行操作之前它不會消失。

同時再觸發提示欄的動作附近傳達提示欄資訊

Anatomy 結構

1 Container 容器 2 Supporting text 輔助文字 3 Action (optional)行動(可選) 4 Close button (optional)關閉按鈕(可選)

Text label 文字標籤

包含一個與正在執行的過程直接相關的文字標籤。在緊湊的視窗大小中，文字標籤可以包含多達兩行的文字。

✓ 儘可能將文字標籤保持一行

✓ 在移動裝置上，文字標籤最多可以兩行

× 避免天機圖示，如果需要圖示請考慮用對話方塊

× 避免使用風格化的文字，如果訊息需要連結可新增一個按鈕

Container 容器

提示欄顯示在帶有灰色背景的矩形容器中。容器應完全不透明，以便文字標籤保持清晰可讀。

提示欄帶有陰影，以便在內容中突出顯示

× 內容與操作區分不足，使用相同樣式

× 避免在提示欄中使用實心按鈕，這會吸引過多注意力

在寬佈局中，擴充套件容器寬度以適應較長的文字標籤

× 透明度過低會降低可讀性

× 避免改變提示欄的形狀

Action 操作

提示欄上可以顯示一個按鈕，讓使用者快速操作。但是請注意：不要把重要功能只放在提示欄裡，使用者應該能透過正常的介面操作找到這些功能。

文字按鈕應顯示彩色文字，以便將操作與文字分開

checkDo 做
If an action is long, it can be displayed on a third line

✓ 如果一個動作很長，可以顯示在第三行

✓ 允許使用者修改選擇撤銷操作

× 無需取消操作，因為提示欄預設情況下會自行消失

Placement 放置位置

At the bottom of a UI 在使用者介面的底部

應放置在介面底部。可適當向上調整位置以避免與底部的其他元素（如浮動按鈕或應用欄）重疊。不要放在常用觸控區域或導航前面。

✓ 將提示欄放在主要內容上方

× 避免將提示欄放置在導航元件前方

為了保持鍵盤可訪問性，避免將提示欄完全遮擋可操作元素，這會影響使用者瞭解當前聚焦內容。

✓ 調整提示欄的帶下，避免遮擋焦點元素

× 避免覆蓋焦點元素

只有在沒有固定導航元素時才可橫跨整屏。此時提示欄可以將 FABs 向上推。

× 提示欄可以橫跨整個螢幕，但不應出現在導航，浮動按鈕前面

Snackbars and floating action buttons (FABs)提示欄和浮動操作按鈕（FABs）

應該出現在FAB上方

× 不要覆蓋FAB

× 不要放置在FAB下一層

Responsive layout 響應式佈局

Compact window size 緊湊視窗尺寸

在緊湊視窗大小中，提示欄高度從 48dp 到 64dp，可容納一到兩行文字，並保持與螢幕四邊的固定距離。

Medium & expanded window sizes 中等和擴充套件視窗尺寸

在平板和桌面等中大尺寸裝置上，提示欄可水平擴充套件以容納更長文字（建議40-60字元），並保持與螢幕邊緣的靈活間距。提示欄應保持單行文字，可選擇新增一個按鈕。

在更寬的佈局中，如果提示欄始終放置在螢幕底部相同的位置，它們可以左對齊或居中對齊。

× 不要將提示欄緊貼螢幕邊緣

× 不要並排或相鄰放置連續的提示欄

Behavior 行為

Appearing and disappearing 出現與消失

它們會毫無徵兆地出現，但不會影響使用者操作。提示欄可在4-10秒後自動消失。在網頁上，除非有內聯反饋，否則應避免自動消失。

帶有操作的提示欄應該保持在螢幕上，直到使用者在提示欄上採取操作或將其關閉。

Consecutive snackbars 連續的提示欄

連續的提示欄只能單個顯示。無操作的會自動消失，有操作的需手動關閉。更新資訊的提示欄可直接替換舊的。

×避免互相疊放提示欄

× 避擴音示欄動畫聯動或影響其他控制元件

Interaction & style 互動與樣式

帶操作的提示欄需保持顯示直到使用者響應，而無操作的可在 4-10 秒後自動消失。但在網頁上，如無額外反饋，自動消失可能影響使用者體驗。

提示欄使用一種顏色以突出顯示於 UI 元素。使用預設的顏色對映以避免顏色衝突問題。

Accessibility requirements on web網頁的無障礙訪問要求

提示條的資訊必須同時在觸發操作處顯示。

如：將"儲存"按鈕更新為"已儲存"的同時顯示提示條。

2. Make the snackbar actionable2. 使小吃欄具備可操作性

也可以新增操作按鈕，這樣提示條會保持顯示直到使用者操作。

Focus 焦點

有如下焦點要求：

提示欄顯示訊息時只需通知使用者，不要改變頁面焦點位置。

不要自動把頁面焦點移到提示欄上。

讓使用者可以自由瀏覽頁面，不要把焦點鎖定在提示欄內。

網頁上要提供快捷鍵（比如 Alt+G）讓使用者快速找到帶操作按鈕的提示欄。記得在幫助文件中說明這個快捷鍵。